import React from 'react'
import { BaseListPage, columnRenders, UdModal, UdModalForm } from '@/lib'
import { Button, Select, message } from 'antd'
import { http } from '@/utils/specialHttp'
import { agentTypeEnum } from '../../common'

const { Option } = Select

const statusEnum = {
  0: '兑付中',
  1: '已兑付',
  2: '未兑付',
}
const agentTypeOptions = Object.keys(agentTypeEnum).map(key => ({ value: key, title: agentTypeEnum[key] }))
const statusOptions = Object.keys(statusEnum).map(key => ({ value: key, title: statusEnum[key] }))

class List extends BaseListPage {
  constructor(props) {
    super(props)
    this.state = {
      title: '经销商积分兑付',
      subTitle: '只针对品牌公司给经销商兑付的场景',
      queryApi: '',
      rowKey: '',
      conditions: [
        { label: '客户编码', id: 'code' },
        { label: '客户名称', id: 'name' },
        {
          label: '客户类型', id: 'agentType', render: () => {
            return (
              <Select>
                {agentTypeOptions.map(({ value, title }) => <Option key={value} value={value}>{title}</Option>)}
              </Select>
            )
          }
        },
        { label: '品牌公司', id: 'redemptionName' },
        { label: '年度', id: 'year' },
        { label: '季度', id: 'qu' },
        { label: '兑付状态', id: 'status', render: () => {
          return (
            <Select>
              {statusOptions.map(({value, title}) => <Option key={value} value={value}>{title}</Option>)}
            </Select>
          )
        } },
      ],
      columns: [
        { title: '编号', dataIndex: 'id', render: (text, record, index) => index + 1 },
        { title: '客户编码', dataIndex: 'code' },
        { title: '客户名称', dataIndex: 'name' },
        { title: '客户类型', dataIndex: 'agentType', render: columnRenders.enum(agentTypeEnum) },
        { title: '公司代码', dataIndex: 'agentCode' },
        { title: '兑付品牌公司', dataIndex: 'redemptionName' },
        { title: '年度', dataIndex: 'year' },
        { title: '季度', dataIndex: 'qu' },
        { title: '兑付积分', dataIndex: 'redemptionPoints' },
        { title: '费用申请单号', dataIndex: 'order' },
        { title: '状态', dataIndex: 'status', render: columnRenders.enum(statusEnum) },
        { title: '创建时间', dataIndex: 'createTime' },
        { title: '创建人', dataIndex: 'createUser' },
        { title: '确认时间', dataIndex: 'confirmTime' },
        { title: '确认人', dataIndex: 'confirmUser' },
        {
          title: '操作', dataIndex: 'operate', fixedWidth: '40px', fixed: 'right', render: columnRenders.operate([
            { title: '编辑', action: (text, record) => this.openModal(record) }
          ])
        },
      ],
      leftBtns: [
        <Button type='primary'>导入</Button>,
        <Button>导出</Button>
      ],
      tableProps: {
        scroll: { x: true },
      }
    }
  }

  public openModal = (row) => {
    UdModal.open({
      title: '编辑',
      content: <UdModalForm items={[
        {label: '客户编码', id: 'code', render: () => <div>{row.code}</div>},
        {label: '客户名称', id: 'code', render: () => <div>{row.name}</div>},
        {label: '费用申请单号', id: 'order'},
      ]}
      values={row}
      />,
      onOk: (values) => {
        return http.post('').then(res => {
          message.success('编辑成功')
          this.query()
        })
      }
    })
  }

}

export default List
